/**
 * @Description: 我的模块-我的订单页面，这里都是入口型的配置，因为进入这个页面前已经进行了登录判定，所以各个入口不再单独的做登录限制
 * @author tao.xie
 * @date 2019-08-07 18:00
*/
<template>
  <div>
    <div
      v-for="(item,index) in entry"
      v-bind:key="index"
      class="flex-h flex-vc wrapper"
      :class="index>0?'xb_border eee':''"
      @click="pushToPage(item)"
    >
      <img :src="item.icon" />
      <span>{{item.name}}</span>
    </div>
  </div>
</template>

<script>
import { UserBeanUtils } from 'vue-xiaobu-utils'
export default {
  data() {
    return {
      entry: [
        {
          icon: require('./assets/dingzhi.png'),
          name: '定制班线',
          url: 'xbapp://open/city-app/customRouteOrderList.html?_tv=true',
          appendPhone: false
        },
        {
          icon: require('./assets/changtu.png'),
          name: '长途客运',
          url: 'http://m.jdctky.com/ol.aspx',
          appendPhone: true
        },
        {
          icon: require('./assets/baoche.png'),
          name: '包车',
          url: 'xbapp://open/city-app/bcOrderList.html?_tv=true',
          appendPhone: false
        },
        {
          icon: require('./assets/chejian.png'),
          name: '车检预约',
          url: 'xbapp://open/city-app/reservationRecord.html?_tv=true',
          appendPhone: false
        }
      ]
    }
  },
  methods: {
    pushToPage(item) {
      let url = item.url
      if (item.appendPhone) {
        url = url + '?phone=' + UserBeanUtils.getUserPhone()
      }
      window.location.assign(url)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
.wrapper {
  width: 686px;
  height: 140px;
  padding: 0px 32px;
  background: #fff;
}
.wrapper > img:first-of-type {
  width: 80px;
  height: 80px;
}
.wrapper > span:first-of-type {
  color: #000;
  font-size: 16px; /*no*/
  line-height: 24px; /*no*/
  margin-left: 32px;
}
</style>
